<template>
  <div style="height: 100%;" class="flex-direction_column">
    <el-card
      shadow="never"
      body-style="padding: 0;height:100%;">
      <el-row class="container">
        <el-col :span="10">
          <div>
            <div class="title">器材详情</div>
            <div class="content">
              <div v-if="isReadOnly">
                <div class="content-row">
                  <span>器材名称：</span>
                  <span>{{ dataForm.name }}</span>
                </div>
                <div class="content-row">
                  <span>型号：</span>
                  <span>{{ dataForm.modelName }}</span>
                </div>
                <div class="content-row">
                  <span>器材设备类别：</span>
                  <span>{{ dataForm.category }}</span>
                </div>
                <div class="content-row">
                  <span>标签类型：</span>
                  <span>{{ dataForm.labelTypeName }}</span>
                </div>
                <div class="content-row">
                  <span>安装方法：</span>
                  <span>{{ dataForm.installMethodName }}</span>
                </div>
                <div class="content-row">
                  <span>标签尺寸规格：</span>
                  <span>{{ dataForm.labelSizeName }}</span>
                </div>
                <div class="content-row">
                  <span>贴标方式：</span>
                  <span>{{ dataForm.labelWayName }}</span>
                </div>
                <div class="title">器材指南</div>
                <div class="content-row">
                  {{ dataForm.equipmentGuide }}
                </div>
              </div>
              <el-form
                ref="ruleForm"
                :model="dataForm"
                :rules="$rules.equipmentRules"
                label-width="100px"
                v-else
                style="padding: 30px">
                <el-form-item label="器材名称" prop="name">
                  <el-input v-model="dataForm.name" style="width: 250px" placeholder="请输入器材名称"></el-input>
                </el-form-item>
                <el-form-item label="型号" prop="model">
                  <el-select v-model="dataForm.model" style="width: 250px" filterable placeholder="请选择型号">
                    <el-option
                      v-for="item in modelOptions"
                      :key="item.valueId"
                      :label="item.valueName"
                      :value="item.valueId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="器材类别" prop="category">
                  <el-input
                    v-model="dataForm.category"
                    style="width: 250px"
                    placeholder="请输入器材类别"></el-input>
                </el-form-item>
                <el-form-item label="标签类型" prop="labelType">
                  <el-select v-model="dataForm.labelType" style="width: 250px" filterable placeholder="请选择标签类型">
                    <el-option
                      v-for="item in labelTypeOptions"
                      :key="item.valueId"
                      :label="item.valueName"
                      :value="item.valueId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="安装方法" prop="installMethod">
                  <el-select v-model="dataForm.installMethod" style="width: 250px" filterable placeholder="请选择安装方法">
                    <el-option
                      v-for="item in installTypeOptions"
                      :key="item.valueId"
                      :label="item.valueName"
                      :value="item.valueId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="标签规格" prop="labelSize">
                  <el-select v-model="dataForm.labelSize" style="width: 250px" filterable placeholder="请选择标签规格">
                    <el-option
                      v-for="item in labelSizeOptions"
                      :key="item.valueId"
                      :label="item.valueName"
                      :value="item.valueId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="贴标方式" prop="labelWay">
                  <el-select v-model="dataForm.labelWay" style="width: 250px" filterable placeholder="请选择标贴标方式">
                    <el-option
                      v-for="item in labelTieOptions"
                      :key="item.valueId"
                      :label="item.valueName"
                      :value="item.valueId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="器材指南">
                  <el-input
                    type="textarea"
                    style="width: 250px"
                    :rows="4"
                    v-model="dataForm.equipmentGuide"
                    placeholder="请输入器材指南"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div>
            <div class="title">器材图片</div>
            <div class="content" style="padding: 20px;text-align: center">
              <el-upload
                v-if="!isReadOnly"
                :action="uploadImagAction"
                :limit="1"
                class="img-add"
                :multiple="false"
                :accept="accept"
                :headers="headers"
                :before-upload="beforeUpload"
                :on-success="handleAddEquipmentPictureExceed"
                :file-list="equipmentPictureList">
                <i class="el-icon-circle-plus-outline"></i>
                <div slot="tip" class="el-upload__tip">点击上传图片，只能上传图片</div>
              </el-upload>
              <el-image v-if="equipmentImg&&!isReadOnly" :src="equipmentImg" class="img"/>
              <el-image v-if="isReadOnly" :src="formatShowImagUrl(this.dataForm.equipmentImg)" class="img"/>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div>
            <div class="title">器材标签安装图片</div>
            <div class="content" style="padding: 20px;text-align: center">
              <el-upload
                v-if="!isReadOnly"
                :action="uploadImagAction"
                :limit="1"
                class="img-add"
                :multiple="false"
                :accept="accept"
                :headers="headers"
                :before-upload="beforeUpload"
                :on-success="handleAddInstallPictureExceed"
                :file-list="installPictureList">
                <i class="el-icon-circle-plus-outline"></i>
                <div slot="tip" class="el-upload__tip">点击上传图片，只能上传图片</div>
              </el-upload>
              <el-image v-if="labelInstallImg&&!isReadOnly" :src="labelInstallImg" class="img"/>
              <el-image v-if="isReadOnly" :src="formatShowImagUrl(this.dataForm.labelInstallImg)" class="img"/>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <span v-if="!isReadOnly" style="margin-top: 10px;text-align: center">
        <el-button type="primary" @click="saveData()">提交</el-button>
        <el-button @click="cancel()">取消</el-button>
      </span>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getUpImagUrl, getShowImagUrl, getTypes, addEquipmentType } from '@/api/warehouse'

export default {
  name: 'EquipmentDetail',
  props: {
    isReadOnly: {
      type: Boolean,
      default: true
    },
    dataForm: {
      type: Object,
      default: function() {
        return {
          name: '',
          model: '',
          modelName: '',
          equipmentTypeId: '',
          parentId: '',
          category: '',
          labelType: '',
          labelTypeName: '',
          installMethod: '',
          installMethodName: '',
          labelSize: '',
          labelSizeName: '',
          labelWay: '',
          labelWayName: '',
          equipmentGuide: '',
          equipmentImg: '',
          labelInstallImg: ''
        }
      }
    }
  },
  data() {
    return {
      uploadImagAction: getUpImagUrl(),
      accept: '.png,.jpeg,.jpg,.PNG,.JPEG,.JPG',
      headers: { 'Authorization': getToken() },
      equipmentPictureList: [],
      installPictureList: [],
      modelOptions: [],
      labelTypeOptions: [],
      installTypeOptions: [],
      labelSizeOptions: [],
      labelTieOptions: [],
      equipmentImg: '',
      labelInstallImg: ''
    }
  },
  mounted() {
    const a = new Promise(resolve => {
      getTypes({ typeId: 'model' }).then(res => {
        resolve(res.resultData)
      })
    })
    const b = new Promise(resolve => {
      getTypes({ typeId: 'label_type' }).then(res => {
        resolve(res.resultData)
      })
    })
    const c = new Promise(resolve => {
      getTypes({ typeId: 'install_method' }).then(res => {
        resolve(res.resultData)
      })
    })
    const d = new Promise(resolve => {
      getTypes({ typeId: 'label_size' }).then(res => {
        resolve(res.resultData)
      })
    })
    const e = new Promise(resolve => {
      getTypes({ typeId: 'label_way' }).then(res => {
        resolve(res.resultData)
      })
    })

    Promise.all([a, b, c, d, e]).then(res => {
      this.modelOptions = res[0]
      this.labelTypeOptions = res[1]
      this.installTypeOptions = res[2]
      this.labelSizeOptions = res[3]
      this.labelTieOptions = res[4]
    })
  },
  methods: {
    formatShowImagUrl(path) {
      return getShowImagUrl(path)
    },
    saveData() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (!this.dataForm.equipmentImg) {
            this.$message({
              message: '请上传器材图片',
              type: 'error'
            })
            return false
          } else if (!this.dataForm.labelInstallImg) {
            this.$message({
              message: '请上传标签安装图片',
              type: 'error'
            })
            return false
          }
          addEquipmentType(this.dataForm).then(response => {
            this.$message({
              message: '新增成功',
              type: 'success'
            })
            this.$emit('onConfirm', {})
          })
        } else {
          return false
        }
      })
    },
    cancel() {
      this.$emit('onCancel', {})
    },
    beforeUpload(file) {
      const testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension =
        testmsg === 'jpg' ||
        testmsg === 'JPG' ||
        testmsg === 'png' ||
        testmsg === 'PNG' ||
        testmsg === 'jpeg' ||
        testmsg === 'JPEG'

      if (!extension) {
        this.$message({
          message: '上传图片只能是' + this.accept + '格式!',
          type: 'error'
        })
        return false
      }
      return true
    },
    handleAddEquipmentPictureExceed(response, files, fileList) {
      if (response.rCode == '200') {
        this.$message.warning(`上传成功`)
        this.dataForm.equipmentImg = response.resultData
        this.equipmentImg = getShowImagUrl(response.resultData)
      } else {
        this.$message.error('上传失败：' + response.rMsg)
      }
    },
    handleAddInstallPictureExceed(response, files, fileList) {
      if (response.rCode == '200') {
        this.dataForm.labelInstallImg = response.resultData
        this.labelInstallImg = getShowImagUrl(response.resultData)
      } else {
        this.$message.error('上传失败：' + response.rMsg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.container {
  height: 100%;

  .el-col {
    height: 100%;

    & > div {
      height: 100%;
    }
  }

  .el-col:first-child {
    border-right: 1px solid #F1F2F4;
  }

  .el-col:last-child {
    border-left: 1px solid #F1F2F4;
  }

  .title {
    width: 100%;
    font-size: 12px;
    box-sizing: border-box;
    padding: 8px 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    background: #F1F2F4;
    font-weight: 500;
    color: $titleTextColor;
    line-height: 22px;
  }

  .content {
    position: relative;
    box-sizing: border-box;
    height: 100%;

    .img-add {
      position: absolute;
      font-size: 60px;
      left: 50%;
      top: 50%;
      box-sizing: border-box;
      padding: 10px;
      border-radius: 5px;
      z-index: 1;
      transform: translate(-50%, -50%);
      background: rgba(240, 240, 240, 0.5);
    }

    .img {
      width: 100%;
    }

    .content-row {
      box-sizing: border-box;
      padding: 13px 15px 11px 15px;
      font-size: 12px;
      color: $contentTextColor;
      line-height: 22px;
    }

    .content-row + .content-row {
      border-top: 1px #F1F2F4 solid;
    }
  }
}
</style>
